1 files changed, 40 insertions, 0 deletions
diff --git a/src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx b/src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx
new file mode 100644
index 0000000..d24f948
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/settings/WebsiteTrackingCode.tsx
@@ -0,0 +1,40 @@
+import { Column, Label, Text, TextField } from '@umami/react-zen';
+import { useConfig, useMessages } from '@/components/hooks';
+
+const SCRIPT_NAME = 'script.js';
+
+export function WebsiteTrackingCode({
+  websiteId,
+  hostUrl,
+}: {
+  websiteId: string;
+  hostUrl?: string;
+}) {
+  const { formatMessage, messages, labels } = useMessages();
+  const config = useConfig();
+
+  const trackerScriptName =
+    config?.trackerScriptName?.split(',')?.map((n: string) => n.trim())?.[0] || SCRIPT_NAME;
+
+  const getUrl = () => {
+    if (config?.cloudMode) {
+      return `${process.env.cloudUrl}/${trackerScriptName}`;
+    }
+
+    return `${hostUrl || window?.location?.origin || ''}${
+      process.env.basePath || ''
+    }/${trackerScriptName}`;
+  };
+
+  const url = trackerScriptName?.startsWith('http') ? trackerScriptName : getUrl();
+
+  const code = `<script defer src="${url}" data-website-id="${websiteId}"></script>`;
+
+  return (
+    <Column gap>
+      <Label>{formatMessage(labels.trackingCode)}</Label>
+      <Text color="muted">{formatMessage(messages.trackingCode)}</Text>
+      <TextField value={code} isReadOnly allowCopy asTextArea resize="none" />
+    </Column>
+  );
+}